<template>
  <div>
    <p>商品清单如下:</p>
    <div v-for="(obj,index) in arr " :key="index">
      {{obj.shopName}}-----{{obj.price}}/份

    </div>
    <lyhlj v-for="(obj,index) in arr" :key="index" :name='obj.shopName' :price='obj.price' :count='obj.count'
      :ind='index' @add1='btn1' @sss='btn2'></lyhlj>
    <p>总价为:{{jsd}}</p>
  </div>
</template>

<script>
  import lyhlj from './components/cd'
  export default {
    components: {
      lyhlj
    },

    data() {
      return {
        arr: [{
            "shopName": "可比克薯片",
            "price": 5.5,
            "count": 0
          },
          {
            "shopName": "草莓酱",
            "price": 3.5,
            "count": 0
          },
          {
            "shopName": "红烧肉",
            "price": 55,
            "count": 0
          },
          {
            "shopName": "方便面",
            "price": 12,
            "count": 0
          }
        ]
      }
    },
    methods: {
      btn1(ind) {
        this.arr[ind].count++
      },
      btn2(ind) {
        this.arr[ind].count > 0 && this.arr[ind].count--
      }
    },
    computed: {
      jsd() {
        return this.arr.reduce((sum, obj) => sum += obj.price * obj.count, 0)
      }
    }
  }
</script>

<style>

</style>